"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";
import IScroll from "./iscroll.jsx";

import { CONFIG } from "../common/config.js";
import { CVCalendar, CVCalendarMonth } from "../common/calendar.jsx";
import { GOTOMixin, HighChartMixin } from "./mixins.jsx";
import { TradingDetailStore } from "../store/tradingstore.js";
import { curDate, getISODate, getISODatetime, getDateStartEndByType, getDateObj, getWeekOfMonth, getWeekNumber } from "../common/datehelper.js";
import { getQuarter } from "../common/datehelper.js";
import { TradingDetailActions } from "../action/tradingaction.js";
import { doughNut2DConfig, column2DConfig, lineConfig, getColors, pie2DConfig } from "../common/chartconfig.js";
import { numFixed, unitFormat } from "../common/numberformat.js";
import { sliceNoNull, loadingCheckChart1 } from "./common.jsx"
import { getLastTradingDay } from "../store/common.js";

const DAY = 9;

var zzCal = function(dataArray, name, type = 1, end = true, colors = getColors()){
	// 占比计算
	// dataArray 示例：
	// [{"label": "两融成交量", "value": 460000000000, "vdate": 1430150400000 },
    //  {"label": "传统成交量", "value": 500000000000, "vdate": 1430150400000 },
 	//  {"label": "两融成交量", "value": 460000000000, "vdate": 1430160400000 },
	//  {"label": "传统成交量", "value": 500000000000, "vdate": 1430160400000 }, ]
	var zb = '';
	if (type == 2) {
		zb = ', 占比%'
	}
	if (dataArray == null || dataArray.length == 0){
		// 返回一个空结构
		return (
			<div className="info">
				<div className="first">
					<p className="title"><span></span><label></label></p>
					<p className="value">元{zb}</p>
				</div>
				<div className="second">
					<p className="title"><span></span><label></label></p>
					<p className="value">元{zb}</p>
				</div>
				<div className="top_line">
					<p className="title">{name}</p>
					<p className="value">元</p>
				</div>
			</div>
		)
	}

	// 合并计算
	var labels = [];// ['两融成交量', '传统成交量']
	var labelValues = {}; // {'两融成交量': [{ "value": 460000000000, "vdate": 1430150400000}, {"value": 460000000000, "vdate": 1430160400000}], 
						  //  "传统成交量": [{"value": 500000000000, "vdate": 1430150400000}, {"value": 500000000000, "vdate": 1430160400000}]}
	for(var i=0; i<dataArray.length; i++){
		var item = dataArray[i];
		if(labels.indexOf(item.label) < 0){
			labels.push(item.label);
			labelValues[item.label] = [];
		}
		labelValues[item.label].push(
			{vdate:item.vdate, value:item.value}
		)
	}

	// 生成 dom 节点
	var total = 0;
	for(var i=0; i<labels.length; i++){
		var label = labels[i];
		// 默认第一个对象是最新的数据
		var value = sliceNoNull(labelValues[label], 0).value;
		labels[i] = [label, value];
		total = total + value;
	}

	var infoList = [];

	for(var i=0; i<labels.length; i++){
		var label = labels[i][0];
		var value = labels[i][1];
		var unitValue = unitFormat(value);
		if (type == 2) {
			zb = ', 占比' + numFixed((total==0||total==null || value==null)? null : (value*100/total), 2) + '%';
		}
		infoList.push(
			<div className="first" key={'info-'+label}>
				<p className="title" style={{color: colors==null?'':colors[i]}}><span ></span><label >{label}</label></p>
				<p className="value">{numFixed(unitValue[0], 2)}{unitValue[1]}元{zb}</p>
			</div>
		)
	}
	if (end == true) {
		unitValue = unitFormat(total);
		infoList.push(
			<div className="top_line" key={'end'}>
				<p className="title">{name}</p>
				<p className="value">{numFixed(unitValue[0], 2)}{unitValue[1]}元</p>
			</div>
		)
	}

	return (
		<div className="info">
			{infoList}
		</div>
	)
}

var loadingCheckChart = function(status, key, iframe){
	// 检查图形的数据是否loading完成
	if(status == null){
		return iframe;
	}
	if(status[key] == 'FETCHING'){
		return <i className="icon-spinner icon-spin"></i>;
	}
	return iframe;	
}

var TradingMixin = {
	toggleCalendar: function(){
		this.setState({displayCalendar: !this.state.displayCalendar});
	},
	goBackTrading: function(event){
		this.setState({disableChart: true});
		this.gotoTrading(event);
	},
	renderHeader: function(title){
		return (
			<header id="header">
				<div className="header_sort_type">
	                <span onTouchTap={this.handleDateTypeChoose} data-target="DAY" className={"first " + (this.state.dimdate=='DAY'?'now': '')}>日</span>
	                <span onTouchTap={this.handleDateTypeChoose} data-target="WEEK" className={"" + (this.state.dimdate=='WEEK'?'now': '')}>周</span>
	                <span onTouchTap={this.handleDateTypeChoose} data-target="MONTH" className={"" + (this.state.dimdate=='MONTH'?'now': '')}>月</span>
	                <span onTouchTap={this.handleDateTypeChoose} data-target="QUARTER" className={"" + (this.state.dimdate=='QUARTER'?'now': '')}>季</span>
	                <span onTouchTap={this.handleDateTypeChoose} data-target="YEAR" className={"last " + (this.state.dimdate=='YEAR'?'now': '')}>年</span>
	            </div>
				<span className="back_btn" onTouchTap={this.goBackTrading}>
					<i className="icon-angle-left"></i>
					<p id="header-text">{title}</p>
				</span>
			</header>
		);
	},
	renderCalendar: function(date = this.state.enddate, color = ''){
		var calendar = null;
		if(this.state.displayCalendar == true){
			if(this.state.dimdate == 'DAY' || this.state.dimdate == 'WEEK'){
				calendar = <CVCalendar handleSelect={this.handleSelectDate} curDate={getDateObj(date)}/>;
			}
			else if(this.state.dimdate == 'MONTH' || this.state.dimdate == 'QUARTER' || this.state.dimdate == 'YEAR'){
				calendar = <CVCalendarMonth handleSelect={this.handleSelectDate} curDate={getDateObj(date)}/>;
			}
		}
		var endDate = getDateObj(date);
		if(this.state.dimdate == 'MONTH'){
			endDate = endDate.getFullYear() + '年' + (endDate.getMonth() + 1) + '月';
		}
		else if(this.state.dimdate == 'WEEK'){
			var week = getWeekOfMonth(endDate);
			endDate = endDate.getFullYear() + '年' + (endDate.getMonth() + 1) + '月 第' + week + '周';
		}
		else if(this.state.dimdate == 'QUARTER'){
			var quarter = getQuarter(endDate);
			endDate = endDate = endDate.getFullYear() + '年 第' + quarter + '季';
		}
		else if(this.state.dimdate == 'YEAR'){
			endDate = endDate = endDate.getFullYear() + '年';
		}
		else if(this.state.dimdate == 'DAY'){
			endDate = endDate.getFullYear() + '年' + (endDate.getMonth() + 1) + '月' + endDate.getDate() + '日';
		}
		if (color) {
			color = " " + color;
		}
		return ([
			<div className={"search_date" + color}>
				<div className="datetime_input date to_datetime" id="datetimepicker" onTouchTap={this.toggleCalendar}>
					<input name="endDate" type="text" value={endDate} readOnly={true}/>
					<span className="add-on"><i className="icon-th icon-calendar"></i></span>
				</div>
				<div className="name">
					<i className="icon-sitemap"></i><span>平安证券</span>
				</div>
				<div className="line">
					<div className="line"><div className="line"><div className="line">
						<div className="line"></div></div></div>
					</div>
			    </div>
			</div>,
			calendar
		]);
	},
	endDateToRange: function(dimdate, endDate, save = false){
		var params = {
			dimdate : dimdate,
			apiCollections: this.state.apiCollections
		};
		var fetchData = function(params){
			params['startdate'] = params['startdate'].replace(/\-/g, '');
			params['enddate'] = params['enddate'].replace(/\-/g, '');
			TradingDetailActions.fetchData(params);
		}

		if (dimdate == 'DAY') {
			var callback = function(lastTradingDay, key, data){
				params['enddate'] = getISODate(lastTradingDay);
				if (key + DAY > data.length - 1) {
					var date = new Date(lastTradingDay.getFullYear() - 1, 11,31,12);
					getLastTradingDay(date, function(lastTradingDay, k, d) {
						params['startdate'] = getISODate(d[key +  DAY - data.length]);
						this.setState($.extend(true, {}, params));
						fetchData(params);
					}.bind(this));
				} else {
					params['startdate'] = getISODate(data[key + DAY]);
					this.setState($.extend(true, {}, params));	
					fetchData(params);
				}	
			}.bind(this);
			endDate = new Date(endDate) < new Date() ? endDate : Date();
			getLastTradingDay(new Date(endDate), callback);
		} 
		else {
			var date = getDateStartEndByType(new Date(endDate), dimdate, DAY);

			params['startdate'] = getISODate(date.startdate);
			params['enddate'] = getISODate(date.enddate);

			if (save) {
				this.setState($.extend(true, {}, params));
			}		
			fetchData(params);
		}
	},
	renderRank: function(rank_last, params){
		if(rank_last == null){
			return null;
		}
		
		params = (params == null? {}: params);
		var num = params['num'];
		num = (num == null ? 100 : num);
		var decimal = params['decimal'];
		decimal = (decimal == null ? 3 : decimal);
		var unit = params['unit'];
		var unitBu = params['unitBu']; // 业务单位
		unitBu = (unitBu == null ? '元': unitBu);


		rank_last = rank_last.slice(0, num);
		if (rank_last != null && rank_last.length) {
			var rankList = [];
			rank_last.sort(function(val1, val2) {
				val1.value = val1.value == null ? 0 : val1.value;
				val2.value = val2.value == null ? 0 : val2.value;
				return val2.value - val1.value;
			})
			for (var i = 0; i < rank_last.length; i++) {
				var tdVal = unitFormat(rank_last[i].value, unit);
				var unitBu = unitBu == '万分之一' ? (<small className="percentage-10000"></small>) : unitBu;
				var temp = [<td className="title"><span className="num">{i+1}.</span>{rank_last[i].label}</td>,
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" 
							  	aria-valuenow="90" aria-valuemin="0"aria-valuemax="100"
							  	style={{width: (rank_last[i].value *100/ rank_last[0].value) + '%'}} 
							  	>
							  	{numFixed(tdVal[0], 3)}{tdVal[1]}{unitBu}</div>
							</div>
						</td>];
				if (i < 3) {
					var cls = 'n' + (i + 1)
					rankList.push(<tr className={cls}>{temp}</tr>);
				} else {
					rankList.push(<tr>{temp}</tr>);
				}
			}
			return (<span id="barprogress">
				<table>
					<tbody>{rankList}</tbody></table>
			</span>)
		}
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		var className = parent.attr('class');
		if(className != 'page_bargain'){
			parent.attr('class', 'page_bargain');
		}
	},
}


var PageTradingDetail = React.createClass({
	mixins: [History, GOTOMixin, TradingMixin, Reflux.connect(TradingDetailStore, "data"), HighChartMixin], //FusionChartMixin, 
	getInitialState: function(){
		var enddate = getISODate(new Date());
		
		return {
			rankType: 'area', 
			apiCollections: [],
			displayCalendar: false,
			dimdate: 'DAY', // DAY/MONTH
			startdate: enddate,
			enddate: enddate,
			disableChart: true, // 禁止渲染图形
		};
	},
	getPieChartConfig: function(values, color){
		// values: [{label:xxx, value:xxx}, {label:xxx, value:xxx}]
		var config = $.extend(true, {}, pie2DConfig);
		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var data = values;
		config['dataSource']['data'] = data;
		config.height = 100;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.pieRadius = 45;
		return config;
	},
	getColumnChartConfig: function(values, color) {
		var config = $.extend(true, {}, column2DConfig);
		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var dataset = [];
		var category = [];

		var temp = {};
		if (values[0].ex_date != undefined) {
			for (var i = 0; i < values.length; i++) {
				var item = values[i];
				category.push({'label': item.ex_date});
				for (var j = 0; j < item.data.length; j++) {
					var item1 = item.data[j];
					if (!temp.hasOwnProperty(item1.label)) {
						temp[item1.label] = [];
					}
					item1.value = item1.value == null ? 0 : item1.value;
					temp[item1.label].push({'value': item1.value});
					}
				}
			}
		
			for (var item in temp) {
				dataset.push({seriesname: item, data: temp[item]});
		}

		config['dataSource']['categories'][0]['category'] = category;
		config['dataSource']['dataset'] = dataset;
		config.height = 250;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.labelStep = 4;

		return config;
	},
	getLineChartConfig: function(values, color){
		var config = $.extend(true, {}, lineConfig);

		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var dataset = [];
		var category = [];

		if (values[0].ex_date != undefined) {
			var temp = {};
			for (var i = 0; i < values.length; i++) {
				var item = values[i];
				category.push({'label': item.ex_date});
				for (var j = 0; j < item.data.length; j++) {
					var item1 = item.data[j];
					if (!temp.hasOwnProperty(item1.label)) {
						temp[item1.label] = [];
					}
					item1.value = item1.value == null ? 0 : item1.value;
					temp[item1.label].push({'value': item1.value});
				}
			}
		}
		for (var item in temp) {
			dataset.push({seriesname: item, data: temp[item]});
		}

		config['dataSource']['categories'][0]['category'] = category;
		config['dataSource']['dataset'] = dataset;
		config.height = 190;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.labelStep = 3;

		return config;
	},
	handleSelectDate: function(date) {
		date = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 12);
		this.endDateToRange(this.state.dimdate, date, true);
		// 1 秒后关闭 calendar
		// setTimeout(function(){
		// 	this.setState({displayCalendar: false});
		// }.bind(this), 1000)
	},
	handleDateTypeChoose: function(event){
		var dimdate = $(event.target).attr('data-target');
		this.setState({
			dimdate: dimdate
		})
		this.endDateToRange(dimdate, this.state.enddate);
	},
	formatData: function(sdata) {
    	if (sdata == null || sdata.length == 0) return [{}];

    	var data = [];
    	var date = {}

    	for (var i = 0; i < sdata.length; i++) {
    		var item = sdata[i];
    		if (!date.hasOwnProperty(item.ex_date)) {
    			date[item.ex_date] = [];
    		}
    		date[item.ex_date].push(
    			{label: item.label, value: item.value}
    		)
    	}
    	for (var d in date) {
    		data.push({ex_date: d, data:date[d]});
    	}
    	data.sort(function(val1, val2) {
    		return val1.ex_date - val2.ex_date;
    	});
    	if (this.state.dimdate != 'DAY') {
    		var lastDate = data[data.length - 1]['ex_date'];
    		var endDate = new Date(this.state.enddate);
    		if (this.state.dimdate == 'WEEK') {
    			var week = getWeekNumber(endDate);
    			if (week == 0) {
    				var temp = new Date(endDate);
    				temp.setDate(-7);
    				week = getWeekNumber(temp) + 1;
    				week = week < 10 ? '0' + week : week;
    				week = temp.getFullYear() + '' + week;
    			} else {
    				week = week < 10 ? '0' + week : week;
    				week = endDate.getFullYear() + '' + week;
    			}
    			
    			console.log(endDate, lastDate, week);
    			if (lastDate != week) {
    				return [{}];
    			}
    		} else if (this.state.dimdate == 'MONTH') {
    			var month = getISODate(endDate).replace(/\-/g,'').substr(0, 6);
    			if (lastDate != month) {
    				return [{}];
    			}
    		} else if (this.state.dimdate == 'QUARTER') {
    			var quarter = endDate.getFullYear() + '0' + getQuarter(endDate);
    			
    			if (lastDate != quarter) {
    				return [{}];
    			}
    		} else if (this.state.dimdate == 'YEAR') {
    			if (lastDate.substr(0,4) != endDate.getFullYear()) {
	    			return [{}];
	    		}
    		}
    	}
    	return data;
    },
	changeType: function(event) {
		var rankType = $(event.target).attr('data-target');
		this.setState({'rankType': rankType});
	},
	componentDidMount: function(){
		var params = {
			'startdate': this.state.startdate,
			'enddate': this.state.enddate,
			'dimdate': this.state.dimdate
		};
		var callback = function(lastTradingDay, key, data){
			params['startdate'] = getISODate(lastTradingDay);
			params['enddate'] = getISODate(lastTradingDay);
			if (key + DAY > data.length - 1) {
				var date = new Date(lastTradingDay.getFullYear() - 1, 11,31,12);
				getLastTradingDay(date, function(lastTradingDay, k, d) {
					params['startdate'] = getISODate(d[key +  DAY - data.length]);
				}.bind(this));
			} else {
				params['startdate'] = getISODate(data[key + DAY]);
			}
			if(this.props.location.query.page == 'AUM'){
				params['apiCollections'] = ["aum"];
			} 
			else if(this.props.location.query.page == 'VOLUME'){
				params['apiCollections'] = ["trade"];
			} 
			else if(this.props.location.query.page == 'YJSR'){
				params['apiCollections'] = ["comi"];
			}
			else if(this.props.location.query.page == 'YJFL'){
				params['apiCollections'] = ["comr"];
			}
			else if (this.props.location.query.page == 'SCFE'){
				params['apiCollections'] = ["portion"];
			}
			else if(this.props.location.query.page == 'BZJS'){
				params['apiCollections'] = ["cash"];
			}
			else if(this.props.location.query.page == 'JYKHS'){
				params['apiCollections'] = ["tradecust"];
			}
			else if(this.props.location.query.page == 'LRZJC'){
				params['apiCollections'] = ["twof"];
			}
			else if(this.props.location.query.page == 'YDGH'){
				params['apiCollections'] = ["repurchase"];
			}
			else if(this.props.location.query.page == 'GPZY'){
				params['apiCollections'] = ["pledge"];
			}
			else if(this.props.location.query.page == 'RZPSJ'){
				params['apiCollections'] = ["board"];
			}
			else if(this.props.location.query.page == 'CCSZ'){
				params['apiCollections'] = ["position"];
			}
		}.bind(this);

		getLastTradingDay(new Date(params['enddate']), callback);
		this.setState(params);
		TradingDetailActions.fetchData({
			dimdate: params['dimdate'],
			apiCollections: params['apiCollections'],
			startdate: params['startdate'].replace(/\-/g, ''),
			enddate: params['enddate'].replace(/\-/g, '')
		});		

		// 500ms 后启用图形渲染
		setTimeout(function(){this.setState({disableChart: false})}.bind(this), 500);
	},
	componentWillUnmount: function() {
    	this.setState({apiCollections: []});
  	},
	render: function(){
		if(this.props.location.query.page == 'AUM'){
			return this.renderAUM();
		}
		else if(this.props.location.query.page == 'VOLUME'){
			return this.renderVolume();
		}
		else if(this.props.location.query.page == 'YJSR'){
			return this.renderYJSR();
		}
		else if(this.props.location.query.page == 'YJFL'){
			return this.renderYJFL();
		} 
		else if (this.props.location.query.page == 'SCFE') {
			return this.renderSCFE();
		}
		else if(this.props.location.query.page == 'BZJS'){
			return this.renderBZJS();
		}
		else if(this.props.location.query.page == 'JYKHS'){
			return this.renderJYKHS();
		}
		else if(this.props.location.query.page == 'LRZJC'){
			return this.renderLRZJC();
		}
		else if(this.props.location.query.page == 'YDGH'){
			return this.renderYDGH();
		}
		else if(this.props.location.query.page == 'GPZY'){
			return this.renderGPZY();
		}
		else if(this.props.location.query.page == 'RZPSJ'){
			return this.renderRZPSJ();
		}
		else if(this.props.location.query.page == 'CCSZ'){
			return this.renderCCSZ();
		}
	},
	renderAUM: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_aum_volumes = _.get(this.state.data, 'ds_aum_volumes', {value: []}).value;
		ds_aum_volumes = ds_aum_volumes.filter(function(item) {
			return item.label != '总资产';
		})
		var lds_data = ds_aum_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);
		var ds_data = this.formatData(ds_aum_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);

		var loadingPie = loadingCheckChart1(status, 'ds_aum_volumes');
		// this.addChart('chart-aum-pie', configChart);
		// var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
		// var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chart = loadingCheckChart(status, 'ds_aum_volumes', chart);

		// var configColumn = this.getColumnChartConfig(lds_data);
		// configColumn.dataSource.chart.xAxisName = "单位(亿)";
		// configColumn.dataSource.chart.numberPrefix = "";
		// configColumn.height = 280;
		var configColumn = this.getHColumn2DConfig(lds_data, '亿');
		configColumn.xAxis.title.text = '单位(亿)';
		configColumn.chart.height = 220;
		var loadingColumn = loadingCheckChart1(status, 'ds_aum_volumes');
		// this.addChart('chart-aum-column', configColumn);
		// var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
		// var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		// chartColumn = loadingCheckChart(status, 'ds_aum_volumes', chartColumn);
		// chartColumn = null;

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_aum_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_aum_area_rank', {value: []}).value;
		}
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		return (
	<div id="container" className="container">
		{this.renderHeader('AUM数据')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date, 'red_bg')}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width:"100%", display:(loadingPie==null?'block': 'none')}}>
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
							{loadingPie}
						</div>
						{zzCal(chart_data, "总成交量", 1, false, getColors())}
					</div>
					
					<div className="all_chart">
						<span style={{width: "100%", display: (loadingColumn==null?'block': 'none')}}>
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>

				</div>

				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>

			</div>
		</div>
		</IScroll>
	</div>	
		)
	},
	renderVolume: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_trade_volumes = _.get(this.state.data, 'ds_trade_volumes', {value: []}).value;
		var lds_data = ds_trade_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_trade_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
		var ds_rank;

		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_trade_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_trade_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_trade_volumes');
		// this.addChart('chart-trade-pie', configChart);
//		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
//		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" 
//				style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor, pointerEvents: 'none'}} allowTransparency="true"></iframe>);
//		chart = loadingCheckChart(status, 'ds_trade_volumes', chart);

		// var configColumn = this.getColumnChartConfig(lds_data);
		// configColumn.dataSource.chart.xAxisName = "单位(亿)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var configColumn = this.getHColumn2DConfig(lds_data, '亿');
		configColumn.xAxis.title.text = '单位（亿）'
		configColumn.chart.height = 220;
		var loadingColumn = loadingCheckChart1(status, 'ds_trade_volumes');
		// this.addChart('chart-trade-column', configColumn);
//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" 
//				style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor, pointerEvents: 'none'}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_trade_volumes', chartColumn);

		var data = (
	<div id="container" className="container">
		{this.renderHeader('成交量')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-trade-pie">
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
							{loadingColumn}
						</div>
						{zzCal(chart_data, "总成交量")}
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-trade-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		)
		return data;
	},
	renderYJSR: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_trade_comi = _.get(this.state.data, 'ds_comi_volumes', {value: []}).value;
		var ds_data = this.formatData(ds_trade_comi);
		var lds_data = ds_data.slice();
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
		var ds_rank;

		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_comi_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_comi_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_comi_volumes');
		// this.addChart('chart-comi-pie', configChart);
//		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
//		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chart = loadingCheckChart(status, 'ds_comi_volumes', chart);

		var lds_data = lds_data.map(function(val) {
			if(val.data == null){
				return {}
			}
			var data = val.data.map(function(item){
				return {label: item.label, value:numFixed(unitFormat(item.value, '百万')[0],2)};
			})
			val.data = data;
			return val
		});
		// var configColumn = this.getColumnChartConfig(lds_data);
		var configColumn = this.getHColumn2DConfig(lds_data);
		configColumn.xAxis.title.text = "单位(百万)";
		configColumn.chart.height = 220;
		// configColumn.dataSource.chart.xAxisName = "单位(百万)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var loadingColumn = loadingCheckChart1(status, 'ds_comi_volumes');
		// this.addChart('chart-comi-column', configColumn);
		
//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_comi_volumes', chartColumn);

		// 佣金收入
		return (
	<div id="container" className="container">
		{this.renderHeader('佣金收入')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-comi-pie">
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
							{loadingPie}
						</div>
						{zzCal(chart_data, "佣金收入", 2)}
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-comi-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		);
	},
	renderYJFL: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_comr_volumes = _.get(this.state.data, 'ds_comr_volumes', {value: []}).value;
		var data = ds_comr_volumes.map(function(val) {
			return {label: val.label, value: val.value / val.total * 10000, ex_date: val.ex_date}
		});
		var ds_data = this.formatData(data);
		var lds_data = ds_data.slice();
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

/*		var configChart = this.getPieChartConfig(chart_data);
		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
		chart = loadingCheckChart(status, 'ds_comr_volumes', chart);
*/
		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '‱'});
		configLine.xAxis.title.text = '单位(万分之一)';
		configLine.chart.height = 220;
		// configLine.dataSource.chart.xAxisName = "费率(‱)";
		// configLine.dataSource.chart.numberPrefix = "";
		var loadingLine = loadingCheckChart1(status, 'ds_comr_volumes');
		// this.addChart('chart-comr-line', configLine);


//		var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
//		var chartLine = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartLine = loadingCheckChart(status, 'ds_comr_volumes', chartLine);

		var total = 0;
		var ave = '';

		if (ds_data[0].ex_date != null) {
			for (var i = 0; i < data.length; i++) {
				total += data[i]['value'];
			}
			ave = data.length != 0 ? (total / data.length) : '';
		}

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_comr_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_comr_area_rank', {value: []}).value;
		}

		var ds_rank = ds_rank.map(function(val) {
			var value = (val.total == null || val.total == 0) ? 0 : val.value/val.total;
			return {label: val.label, value: value*10000, ex_date: val.ex_date}
		});
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];
		
		return (
	<div id="container" className="container">
		{this.renderHeader('佣金费率')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="first_main">
						<table>
							<tbody><tr>
								<td>
									<div className="title">总体佣金费率平均值</div>
									<span className="value">{numFixed(ave, 2)}</span><small className="percentage-10000 large"></small>
								</td>
							</tr>
						</tbody></table>
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-comr-line">
							{this.state.disableChart==true ? null: this.getHighChart(configLine)}
						</span>
						{loadingLine}
					</div>
				</div>

				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last, {unitBu: '万分之一'})}	
				</div>

			</div>
		</div>
		</IScroll>
	</div>	
		);
	},
	renderSCFE: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_portion_volumes = _.get(this.state.data, 'ds_portion_volumes', {value: []}).value;

		var ds_data = this.formatData(ds_portion_volumes);
		for(var i = 0; i < ds_data.length; i++) {
			var item = ds_data[i]['data'];
			var volume = null,sum = null;
			var temp = [];
			if (item != null) {
				for (var j = 0; j < item.length; j++) {
					if (item[j].label == '交易量') {
						volume = item[j].value;
					} else if (item[j].label == '市场总量') {
						sum = item[j].value;
					}
				}
				var zb = (volume == null || sum == null) ? '' : numFixed(volume*100/(sum*2), 2);
				temp.push({value: zb, label: '市场份额'});
				ds_data[i]['data'] = temp;
			}
		}
		var lds_data = ds_data.slice();
		
		ds_data.reverse();

		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
		var ds_rank;

		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_portion_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_portion_area_rank', {value: []}).value;
		}
		ds_rank = ds_rank.map(function(val) {
			return {ex_date: val['ex_date'], label: val['label'], value: val['value']*100/(2*val['total'])}
		})

		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '%'});
		configLine.xAxis.title.text = "份额(%)";
		configLine.chart.height = 220;
		// configLine.dataSource.chart.xAxisName = "份额(%)";
		// configLine.dataSource.chart.yAxisName = "";
		// configLine.dataSource.chart.numberPrefix = "";
		var loadingLine = loadingCheckChart1(status, 'ds_portion_volumes');
		// this.addChart('chart-portion-line', configLine);

//		var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
//		var chartLine = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartLine = loadingCheckChart(status, 'ds_portion_volumes', chartLine);

		var total = 0;
		var ave = null;

		if (ds_data[0].ex_date != null) {
			for (var i = 0; i < ds_data.length; i++) {
				total += parseFloat(ds_data[i]['data'][0].value);
			}
			ave = ds_data.length != 0 ? (total / ds_data.length) : '';
		}

		return (
	<div id="container" className="container">
		{this.renderHeader('市场份额')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="first_main">
						<table>
						<tbody><tr>
								<td>
									<div className="title">市场份额平均值</div>
									<span className="value">{numFixed(ave, 2)}％</span><small></small>
								</td>
							</tr>
							</tbody></table>
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-portion-line">
							{this.state.disableChart==true ? null: this.getHighChart(configLine)}
						</span>
						{loadingLine}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last, {unitBu: '%'})}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		);
	},
	renderBZJS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_cash_volumes = _.get(this.state.data, 'ds_cash_volumes', {value: []}).value;
		var lds_data = ds_cash_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_cash_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_cash_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_cash_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_cash_volumes');
		// this.addChart('chart-cash-pie', configChart);

//		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
//		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chart = loadingCheckChart(status, 'ds_cash_volumes', chart);

		// var configColumn = this.getColumnChartConfig(lds_data);
		var configColumn = this.getHColumn2DConfig(lds_data, '亿')
		configColumn.xAxis.title.text = '单位(亿)'
		configColumn.chart.height = 220;
		// configColumn.dataSource.chart.xAxisName = "单位(亿)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var loadingColumn = loadingCheckChart1(status, 'ds_cash_volumes');
		// this.addChart('chart-cash-column', configColumn);

//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_cash_volumes', chartColumn);

		// 保证金数
		return (
	<div id="container" className="container">
		{this.renderHeader('保证金数')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-cash-pie">
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
							{loadingPie}
						</div>
						{zzCal(chart_data, "总保证金余额")}
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-cash-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		);	
	},
	renderJYKHS: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_tradecust_volumes = _.get(this.state.data, 'ds_tradecust_volumes', {value: []}).value;
		var lds_data = ds_tradecust_volumes.map(function(val) {
			return {label: val.label, value: val.value/10000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_tradecust_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
		var ds_rank;

		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_tradecust_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_tradecust_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		var count = '';
		var sum = '';

		if (chart_data != null) {
			for (var i = 0; i < chart_data.length; i++) {
				if (chart_data[i].label == '交易客户数') {
					count = chart_data[i].value;
				} else if (chart_data[i].label == '总客户数') {
					sum = chart_data[i].value;
				}
			}
		}

		var zb = count*100/sum;

		if (zb == Infinity || isNaN(zb)) {
			zb = ''
		}

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '万'});
		configLine.xAxis.title.text = '单位(万)';
		// configLine.dataSource.chart.xAxisName = "单位(万)";
		// configLine.dataSource.chart.numberPrefix = "";
		var loadingLine = loadingCheckChart1(status, 'ds_tradecust_volumes');
		// this.addChart('chart-tradecust-column', configLine);

//		var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
//		var chartLine = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartLine = loadingCheckChart(status, 'ds_tradecust_volumes', chartLine);

		return (
	<div id="container" className="container">
		{this.renderHeader('交易客户数')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="first_main">
						<table>

							<tbody><tr>
								<td>
									<div className="title">交易客户数</div>
									<span className="value">{unitFormat(count)[0]}</span><small>{unitFormat(count)[1]}户</small>
								</td>
								<td>
									<div className="title">占比</div>
									<span className="value">{numFixed(zb,2)}</span><small>%</small>
								</td>
							</tr>
						</tbody></table>
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-tradecust-column">
							{this.state.disableChart==true ? null: this.getHighChart(configLine)}
						</span>
						{loadingLine}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last, {unitBu: '户', unit: '万'})}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		);
	},
	renderLRZJC: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_twof_volumes = _.get(this.state.data, 'ds_twof_volumes', {value: []}).value;
		var lds_data = ds_twof_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_twof_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_twof_volumes');
		// this.addChart('chart-twof-pie', configChart);

//		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
//		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chart = loadingCheckChart(status, 'ds_twof_volumes', chart);

		// var configColumn = this.getColumnChartConfig(lds_data);
		var configColumn = this.getHColumn2DConfig(lds_data, '亿');
		configColumn.xAxis.title.text = '单位(亿)'
		// configColumn.dataSource.chart.xAxisName = "单位(亿)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var loadingColumn = loadingCheckChart1(status, 'ds_twof_volumes');
		// this.addChart('chart-twof-column', configColumn);

//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_twof_volumes', chartColumn);

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_twof_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_twof_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		return (
	<div id="container" className="container">
		{this.renderHeader('两融资金池')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-twof-pie">
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
							{loadingPie}
						</div>
						{zzCal(chart_data, "总成交量", 2)}
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-twof-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>

				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>
					
			</div>
		</div>
		</IScroll>
	</div>	
		)	
	},
	renderYDGH: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_repurchase_volumes = _.get(this.state.data, 'ds_repurchase_volumes', {value: []}).value;
		var lds_data = ds_repurchase_volumes.map(function(val) {
			return {label: val.label, value: val.value/10000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_repurchase_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data)
		var loadingPie = loadingCheckChart1(status, 'ds_repurchase_volumes');
		// this.addChart('chart-repurchase-pie', configChart);

//		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
//		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chart = loadingCheckChart(status, 'ds_repurchase_volumes', chart);

		// var configColumn = this.getColumnChartConfig(lds_data);
		var configColumn = this.getHColumn2DConfig(lds_data, '千万');
		configColumn.xAxis.title.text = '单位(千万)';
		// configColumn.height = 250;
		// configColumn.dataSource.chart.xAxisName = "单位(千万)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var loadingColumn = loadingCheckChart1(status, 'ds_repurchase_volumes');
		// this.addChart('chart-repurchase-column', configColumn);

//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_repurchase_volumes', chartColumn);

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_repurchase_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_repurchase_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		return (
	<div id="container" className="container">
		{this.renderHeader('约定购回')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-repurchase-pie">
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
							{loadingPie}
						</div>
						{zzCal(chart_data, "融资总盘子", 2)}
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-repurchase-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>

				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>

			</div>
		</div>
		</IScroll>
	</div>	
		)		
	},
	renderGPZY: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_pledge_volumes = _.get(this.state.data, 'ds_pledge_volumes', {value: []}).value;
		var lds_data = ds_pledge_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_pledge_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		var info = [];
		var temp = [];

		if (chart_data != null) {
			for (var i = 0; i < chart_data.length; i++) {
				if (i%2 == 0 && temp.length != 0) {
					info.push(<tr>{temp}</tr>);
					temp = [];
				}
				temp.push(<td style={{width: '50%'}}>
									<div className="title">{chart_data[i].label}</div>
									<span className="value">{numFixed(unitFormat(chart_data[i].value)[0], 2)}</span><small>{unitFormat(chart_data[i].value)[1]}元</small>
								</td>);
			}
			if (temp.length) {
				info.push(<tr>{temp}</tr>);
			}
		} else {
			info.push(<tr><td style={{width: '50%'}}><div className="title"></div>
									<span className="value"></span><small>元</small>
							</td><td style={{width: '50%'}}><div className="title"></div>
									<span className="value"></span><small>元</small>
							</td></tr>);
		}

		// var configLine = this.getLineChartConfig(lds_data);
		var configLine = this.getHLineConfig(lds_data, {unit: '亿'});
		configLine.xAxis.title.text = '单位(亿)'
		// configLine.dataSource.chart.xAxisName = "单位(亿)";
		// configLine.dataSource.chart.numberPrefix = "";
		var loadingLine = loadingCheckChart1(status, 'ds_pledge_volumes');
		// this.addChart('chart-pledge-line', configLine);

//		var jsonConfigLine = encodeURIComponent(JSON.stringify(configLine));
//		var chartLine = (<iframe src={"./chart.html?data="+jsonConfigLine} height={parseInt(configLine.height) + 4} width="100%" style={{border:"none", backgroundColor: configLine.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartLine = loadingCheckChart(status, 'ds_pledge_volumes', chartLine);

		var ds_rank;
		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_pledge_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_pledge_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		return (
	<div id="container" className="container">
		{this.renderHeader('股票质押')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="first_main">
						<table>
							<tbody>{info}
						</tbody></table>
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingLine==null?'block':'none')}} id="chart-pledge-line">
							{this.state.disableChart==true ? null: this.getHighChart(configLine)}
						</span>
						{loadingLine}
					</div>
				</div>

				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>

			</div>
		</div>
		</IScroll>
	</div>	
		);
	},
	renderRZPSJ: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_board_volumes = _.get(this.state.data, 'ds_board_volumes', {value: []}).value;

		var lds_data = ds_board_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_board_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}

		var info = [];
		var temp = [];

		if (chart_data != null) {
			for (var i = 0; i < chart_data.length; i++) {
				if (i%3 == 0 && temp.length != 0) {
					info.push(<tr>{temp}</tr>);
					temp = [];
				}
				temp.push(<td style={{width: '33%'}}>
									<div className="title">{chart_data[i].label}</div>
									<span className="value">{numFixed(unitFormat(chart_data[i].value)[0], 2)}</span><small>{unitFormat(chart_data[i].value)[1]}元</small>
								</td>);
			}
			if (temp.length) {
				info.push(<tr>{temp}</tr>);
			}
		} else {
			info.push(<tr><td style={{width: '33%'}}><div className="title"></div>
									<span className="value"></span><small>元</small>
							</td><td style={{width: '33%'}}><div className="title"></div>
									<span className="value"></span><small>元</small>
							</td><td style={{width: '33%'}}><div className="title"></div>
									<span className="value"></span><small>元</small>
							</td></tr>);
		}

		var ds_rank;

		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_board_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_board_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configColumn = this.getColumnChartConfig(lds_data);
		var configColumn = this.getHColumn2DConfig(lds_data, '亿');
		configColumn.xAxis.title.text = '单位(亿)'
		// configColumn.dataSource.chart.xAxisName = "单位(亿)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var loadingColumn = loadingCheckChart1(status, 'ds_board_volumes');
		// this.addChart('chart-board-column', configColumn);

//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_trade_volumes', chartColumn);

		return (
	<div id="container" className="container">
		{this.renderHeader('融资盘数据')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="first_main" style={{borderBottom: "1px solid #ddd"}}>
						<table>
							<tbody>
							{info}
							</tbody>
						</table>
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-board-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		);	
	},
	renderCCSZ: function(){
		var status = _.get(this.state.data, 'status', {});
		var ds_position_volumes = _.get(this.state.data, 'ds_position_volumes', {value: []}).value;
		var lds_data = ds_position_volumes.map(function(val) {
			return {label: val.label, value: val.value/100000000, ex_date: val.ex_date}
		});
		lds_data = this.formatData(lds_data);

		var ds_data = this.formatData(ds_position_volumes);
		
		ds_data.reverse();

		var chart_data = ds_data[0]['data'];
		var cal_date = '';
		if (this.state.dimdate == 'DAY') {
			cal_date = ds_data[0]['ex_date'];
			if (cal_date) {
				cal_date = cal_date.substr(0,4)+'-'+cal_date.substr(4,2)+'-'+cal_date.substr(6);
			}
		} else {
			cal_date = this.state.enddate;
		}
		var ds_rank;

		if (this.state.rankType == 'brch') {
			ds_rank = _.get(this.state.data, 'ds_position_brch_rank', {value: []}).value;
		} else if (this.state.rankType == 'area') {
		 	ds_rank = _.get(this.state.data, 'ds_position_area_rank', {value: []}).value;
		}
		
		ds_rank = this.formatData(ds_rank);
		var rank_last = ds_rank.reverse()[0]['data'];

		// var configChart = this.getPieChartConfig(chart_data);
		var configPie = this.getHPie2DConfig(chart_data);
		var loadingPie = loadingCheckChart1(status, 'ds_position_volumes');
		// this.addChart('chart-position-pie', configChart);

//		var jsonConfigChart = encodeURIComponent(JSON.stringify(configChart));
//		var chart = (<iframe src={"./chart.html?data="+jsonConfigChart} height={parseInt(configChart.height) + 4} width="100%" style={{border:"none", backgroundColor: configChart.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chart = loadingCheckChart(status, 'ds_position_volumes', chart);

		// var configColumn = this.getColumnChartConfig(lds_data);
		var configColumn = this.getHColumn2DConfig(lds_data, '亿');
		configColumn.xAxis.title.text = '单位(亿)'
		// configColumn.height = 256;
		// configColumn.dataSource.chart.xAxisName = "单位(亿)";
		// configColumn.dataSource.chart.numberPrefix = "";
		var loadingColumn = loadingCheckChart1(status, 'ds_position_volumes');
		// this.addChart('chart-position-column', configColumn);

//		var jsonConfigColumn = encodeURIComponent(JSON.stringify(configColumn));
//		var chartColumn = (<iframe src={"./chart.html?data="+jsonConfigColumn} height={parseInt(configColumn.height) + 4} width="100%" style={{border:"none", backgroundColor: configColumn.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//		chartColumn = loadingCheckChart(status, 'ds_position_volumes', chartColumn);
	
		return (
	<div id="container" className="container">
		{this.renderHeader('持仓市值')}
		<IScroll>
		<div id="page_main">
			<div className="page_detail_model">
				{this.renderCalendar(cal_date)}
				<div className="base_main">
					<div className="mid_info">
						<div className="chart">
							<span style={{width: '100%', display: (loadingPie==null?'block':'none')}} id="chart-position-pie">
								{this.state.disableChart==true ? null: this.getHighChart(configPie)}
							</span>
						{loadingColumn}</div>
						{zzCal(chart_data, "总持仓", 2)}
					</div>
					<div className="all_chart">
						<span style={{width: '100%', display: (loadingColumn==null?'block':'none')}} id="chart-position-column">
							{this.state.disableChart==true ? null: this.getHighChart(configColumn)}
						</span>
						{loadingColumn}
					</div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
							<span className={"first "+(this.state.rankType=='area'? 'now': '')} data-target='area' onTouchTap={this.changeType}>地区</span>
			                <span className={"second "+(this.state.rankType=='brch'? 'now': '')} data-target='brch' onTouchTap={this.changeType}>营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>			
					{this.renderRank(rank_last)}	
				</div>
			</div>
		</div>
		</IScroll>
	</div>	
		);
	}
});

export { PageTradingDetail };